<template>
    <div class="equipment-ledger">
        <!-- 左侧设备树结构 -->
        <div class="left-tree">
            <!-- 搜索框 -->
            <div class="search-input">
                <el-input
                    v-model="filterText"
                    placeholder="请输入分类名称"
                    clearable
                    prefix-icon="Search"
                />
            </div>
            <el-scrollbar style="flex: 1; border-right: 1px solid #eee">
                <div v-if="loading" class="loading">加载中...</div>
                <div v-else-if="apiError" class="error">{{ apiError }}</div>
                <el-tree
                    v-else
                    ref="treeRef"
                    highlight-current
                    node-key="id"
                    :data="treeData"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    :default-expand-all="true"
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick"
                ></el-tree>
                <div v-if="!loading && !apiError && treeData.length === 0" class="empty">
                    暂无数据
                </div>
            </el-scrollbar>
        </div>
        
        <!-- 右侧设备列表内容 -->
        <div class="right-content">
            <!-- 搜索区域 -->
            <div class="search-bar">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item label="设备编码">
                        <el-input v-model="searchForm.equipmentCode" placeholder="请输入设备编码" clearable />
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-input v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="fetchEquipmentData">搜索</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                    </el-form-item>
                </el-form>
                
                <!-- 操作按钮 -->
                <div class="operation-btns">
                    <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
                    <el-button type="success" icon="Edit" @click="handleEdit">修改</el-button>
                    <el-button type="danger" icon="Delete" @click="handleDelete">删除</el-button>
                </div>
            </div>
            
            <!-- 表格区域 -->
            <el-table
                v-loading="tableLoading"
                :data="equipmentList"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
                @row-click="handleRowClick"
                highlight-current-row
            >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" width="50" label="#" />
                <el-table-column prop="equipmentCode" label="设备编码" min-width="120" />
                <el-table-column prop="equipmentName" label="设备名称" min-width="120" />
                <el-table-column prop="brand" label="品牌" min-width="100" />
                <el-table-column prop="specificationModel" label="规格型号" min-width="120" />
                <el-table-column prop="affiliatedWorkshop" label="所属车间" min-width="120" />
                <el-table-column prop="equipmentStatus" label="设备状态" min-width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.equipmentStatus)">
                            {{ getStatusText(scope.row.equipmentStatus) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="160" />
                <el-table-column label="操作" width="220" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)">
                            修改
                        </el-button>
                        <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pagination.page"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>

        <!-- 修改设备弹窗 -->
        <el-dialog
            v-model="editFormVisible"
            title="修改设备信息"
            width="600px"
            destroy-on-close
            :close-on-click-modal="false"
        >
            <el-form 
                ref="editFormRef"
                :model="editForm"
                :rules="editFormRules"
                label-width="100px"
                :inline="false"
            >
                <div class="form-grid">
                    <el-form-item label="设备编码" prop="equipmentCode">
                        <el-input v-model="editForm.equipmentCode" placeholder="请输入设备编码" />
                    </el-form-item>
                    
                    <el-form-item label="设备名称" prop="equipmentName">
                        <el-input v-model="editForm.equipmentName" placeholder="请输入设备名称" />
                    </el-form-item>
                    
                    <el-form-item label="品牌">
                        <el-input v-model="editForm.brand" placeholder="请输入品牌" />
                    </el-form-item>
                    
                    <el-form-item label="规格型号">
                        <el-input v-model="editForm.specificationModel" placeholder="请输入规格型号" />
                    </el-form-item>
                    
                    <el-form-item label="设备分类" prop="deviceId">
                        <el-tree-select
                            v-model="editForm.deviceId"
                            :data="treeData"
                            :props="defaultProps"
                            node-key="id"
                            placeholder="请选择设备分类"
                            style="width: 100%"
                            check-strictly
                        />
                    </el-form-item>
                    
                    <el-form-item label="所属车间" prop="affiliatedWorkshop">
                        <el-select v-model="editForm.affiliatedWorkshop" placeholder="请选择所属车间" style="width: 100%">
                            <el-option
                                v-for="item in workshopOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="设备状态">
                        <el-select v-model="editForm.equipmentStatus" placeholder="请选择设备状态" style="width: 100%">
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                                <span>{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                
            </el-form>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="submitEditForm">确 定</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 新增设备弹窗 -->
        <el-dialog
            v-model="addFormVisible"
            title="新增设备"
            width="600px"
            destroy-on-close
            :close-on-click-modal="false"
            class="add-equipment-dialog"
        >
            <el-form 
                ref="addFormRef"
                :model="addForm"
                :rules="addFormRules"
                label-width="100px"
                :inline="false"
            >
                <div class="form-header">
                    <el-form-item label="设备编码" prop="equipmentCode" class="form-item-code">
                        <div class="code-input-group">
                            <el-input 
                                v-model="addForm.equipmentCode" 
                                placeholder="请输入设备编码"
                                :disabled="autoGenerate"
                            />
                            <div class="auto-generate">
                                <span>自动生成</span>
                                <el-switch v-model="autoGenerate" />
                            </div>
                        </div>
                    </el-form-item>
                </div>
                
                <div class="form-grid">
                    <el-form-item label="设备名称" prop="equipmentName">
                        <el-input v-model="addForm.equipmentName" placeholder="请输入设备名称" />
                    </el-form-item>
                    
                    <el-form-item label="品牌">
                        <el-input v-model="addForm.brand" placeholder="请输入品牌" />
                    </el-form-item>
                    
                    <el-form-item label="规格型号">
                        <el-input v-model="addForm.specificationModel" placeholder="请输入规格型号" />
                    </el-form-item>
                    
                    <el-form-item label="设备分类" prop="deviceId">
                        <el-tree-select
                            v-model="addForm.deviceId"
                            :data="treeData"
                            :props="defaultProps"
                            node-key="id"
                            placeholder="请选择设备分类"
                            style="width: 100%"
                            check-strictly
                            clearable
                        />
                    </el-form-item>
                    
                    <el-form-item label="所属车间" prop="affiliatedWorkshop">
                        <el-select v-model="addForm.affiliatedWorkshop" placeholder="请选择所属车间" style="width: 100%">
                            <el-option
                                v-for="item in workshopOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="设备状态">
                        <el-select v-model="addForm.equipmentStatus" placeholder="请选择设备状态" style="width: 100%">
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                                <span>{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                

            </el-form>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="submitAddForm">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted, getCurrentInstance, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue';

interface EquipmentItem {
    id: number;
    equipmentCode: string;
    equipmentName: string;
    children?: EquipmentItem[];
    [key: string]: any;
}

interface EquipmentData {
    id?: number;
    equipmentCode: string;
    equipmentName: string;
    brand: string;
    specificationModel: string;
    affiliatedWorkshop: string;
    equipmentStatus: number;
    createTime: string;
    [key: string]: any;
}

const { proxy } = getCurrentInstance() as any;

// 树形数据相关
const treeRef = ref();
const treeData = ref<EquipmentItem[]>([]);
const selectedNode = ref<EquipmentItem | null>(null);
const loading = ref(false);
const apiError = ref('');

// 搜索相关
const filterText = ref('');
const defaultProps = {
    children: 'children',
    label: 'equipmentName'
};

// 设备列表相关
const tableLoading = ref(false);
const equipmentList = ref<EquipmentData[]>([]);
const selectedRows = ref<EquipmentData[]>([]);
const currentRow = ref<EquipmentData | null>(null);

// 搜索表单
const searchForm = ref({
    equipmentCode: '',
    equipmentName: '',
    deviceId: 0 // 添加设备ID字段，用于与树形菜单关联
});

// 分页配置
const pagination = ref({
    page: 1,
    pageSize: 10,
    total: 0
});

// 监听搜索词变化
watch(filterText, (val) => {
    treeRef.value?.filter(val);
});

// 过滤节点方法
const filterNode = (value: string, data: EquipmentItem) => {
    if (!value) return true;
    return data.equipmentName.toLowerCase().includes(value.toLowerCase());
};

// 从API加载树形数据
async function loadData() {
    loading.value = true;
    apiError.value = '';
    
    try {
        const res = await axios({
            method: "get",
            url: "/api/EquipmentManagement/GetEquipmentTypeTree"
        });
        
        console.log('API返回:', res);
        if (res && res.status === 200) {
            treeData.value = res.data || [];
            console.log('加载到的树形数据:', treeData.value);
        } else {
            console.error('API调用失败:', res);
            apiError.value = '获取数据失败';
        }
    } catch (error) {
        console.error('API异常:', error);
        apiError.value = '网络异常';
    } finally {
        loading.value = false;
    }
}

// 获取设备列表数据
async function fetchEquipmentData() {
    tableLoading.value = true;
    
    try {
        const response = await axios.get('/api/EquipmentManagement/GetEquipmentLedgerPage', {
            params: {
                equipmentCode: searchForm.value.equipmentCode,
                equipmentName: searchForm.value.equipmentName,
                deviceId: searchForm.value.deviceId, // 添加设备ID参数
                page: pagination.value.page,
                pageSize: pagination.value.pageSize
            }
        });

        if (response.data && response.data.status === 0) {
            // 确保设备状态值为数字类型
            const rows = response.data.rows || [];
            equipmentList.value = rows.map((item: any) => ({
                ...item,
                equipmentStatus: item.equipmentStatus !== undefined ? Number(item.equipmentStatus) : 0
            }));
            console.log('设备数据:', equipmentList.value);
            pagination.value.total = response.data.total || 0;
        } else {
            ElMessage.error(response.data?.msg || '获取数据失败');
            equipmentList.value = [];
            pagination.value.total = 0;
        }
    } catch (error) {
        console.error('获取设备数据失败:', error);
        ElMessage.error('获取设备数据失败，请稍后重试');
        equipmentList.value = [];
        pagination.value.total = 0;
    } finally {
        tableLoading.value = false;
    }
}

// 重置搜索
const resetSearch = () => {
    searchForm.value.equipmentCode = '';
    searchForm.value.equipmentName = '';
    searchForm.value.deviceId = 0; // 重置设备ID
    selectedNode.value = null; // 清除选中节点
    pagination.value.page = 1;
    fetchEquipmentData();
};

// 处理树节点点击事件
function handleNodeClick(node: EquipmentItem) {
    console.log('点击节点:', node);
    selectedNode.value = node;
    // 使用节点ID进行查询
    searchForm.value.deviceId = node.id;
    // 清空其他搜索条件
    searchForm.value.equipmentCode = '';
    searchForm.value.equipmentName = '';
    // 重置分页到第一页
    pagination.value.page = 1;
    // 查询设备列表
    fetchEquipmentData();
}

// 分页处理
const handleSizeChange = (val: number) => {
    pagination.value.pageSize = val;
    pagination.value.page = 1;
    fetchEquipmentData();
};

const handleCurrentChange = (val: number) => {
    pagination.value.page = val;
    fetchEquipmentData();
};

// 表格行选择
const handleSelectionChange = (selection: EquipmentData[]) => {
    selectedRows.value = selection;
    currentRow.value = selection.length > 0 ? selection[0] : null;
};

const handleRowClick = (row: EquipmentData) => {
    currentRow.value = row;
};

// 获取设备状态文本
const getStatusText = (status: string | number) => {
    // 转换为数字
    const statusNum = Number(status);
    
    switch (statusNum) {
        case 1: return '生产中';
        case 2: return '维修中';
        case 3: return '停机';
        case 0: return '未知';
        // 调试时显示实际值，方便排查
        default: return status ? `状态${status}` : '未知';
    }
};

// 获取设备状态类型
const getStatusType = (status: string | number) => {
    // 转换为数字
    const statusNum = Number(status);
    
    switch (statusNum) {
        case 1: return 'success';
        case 2: return 'warning';
        case 3: return 'danger';
        case 0: return 'info';
        default: return 'info';
    }
};

// 操作方法
// 添加表单数据
const addFormVisible = ref(false);
const addForm = ref<AddFormData>({
    id: 0,
    equipmentCode: '',
    equipmentName: '',
    brand: '',
    specificationModel: '',
    affiliatedWorkshop: '',
    equipmentStatus: 1, // 默认为生产中
    deviceId: null // 默认为空，不显示具体值
});

// 是否自动生成编码
const autoGenerate = ref(false);

// 监听自动生成开关变化
watch(autoGenerate, (newVal) => {
    if (newVal) {
        // 生成随机编码
        const timestamp = new Date().getTime();
        const randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
        addForm.value.equipmentCode = `EQ-${timestamp.toString().slice(-6)}-${randomNum}`;
    } else {
        // 清空编码，允许手动输入
        addForm.value.equipmentCode = '';
    }
});

// 修复addForm类型
interface AddFormData {
    id: number;
    equipmentCode: string;
    equipmentName: string;
    brand: string;
    specificationModel: string;
    affiliatedWorkshop: string;
    equipmentStatus: number;
    deviceId: number | null;
}

// 表单验证规则
const addFormRules = {
    equipmentCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
    equipmentName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    deviceId: [{ required: true, message: '请选择设备分类', trigger: 'change' }],
    affiliatedWorkshop: [{ required: true, message: '请选择所属车间', trigger: 'change' }]
};

const addFormRef = ref();

const handleAdd = () => {
    // 重置表单
    addForm.value = {
        id: 0,
        equipmentCode: '',
        equipmentName: '',
        brand: '',
        specificationModel: '',
        affiliatedWorkshop: '',
        equipmentStatus: 1,
        deviceId: null
    };
    
    // 打开新增表单弹窗
    addFormVisible.value = true;
};

// 提交添加表单
const submitAddForm = async () => {
    if (!addFormRef.value) return;
    
    await addFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            try {
                // 确保提交的表单数据中设备状态是数字类型
                const formData = {
                    ...addForm.value,
                    equipmentStatus: Number(addForm.value.equipmentStatus)
                };
                
                const response = await axios.post('/api/EquipmentManagement/AddEquipmentLedger/AddEquipmentLedger', formData);
                
                if (response.data) {
                    ElMessage.success('添加成功');
                    addFormVisible.value = false;
                    fetchEquipmentData(); // 刷新列表
                } else {
                    ElMessage.error('添加失败');
                }
            } catch (error) {
                console.error('添加设备失败:', error);
                ElMessage.error('添加失败');
            }
        } else {
            ElMessage.warning('请正确填写表单');
            return false;
        }
    });
};

// 取消添加
const cancelAdd = () => {
    addFormVisible.value = false;
};

// 编辑表单数据
const editFormVisible = ref(false);
const editForm = ref({
    id: 0,
    equipmentCode: '',
    equipmentName: '',
    brand: '',
    specificationModel: '',
    affiliatedWorkshop: '',
    equipmentStatus: 1, // 修改为数字类型
    deviceId: 0
});

// 表单验证规则
const editFormRules = {
    equipmentCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
    equipmentName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    deviceId: [{ required: true, message: '请选择设备分类', trigger: 'change' }],
    affiliatedWorkshop: [{ required: true, message: '请选择所属车间', trigger: 'change' }]
};

// 车间列表
const workshopOptions = ref([
    { value: 'WS001', label: 'WS001' },
    { value: 'WS002', label: 'WS002' },
    { value: 'WS003', label: 'WS003' },
    { value: 'WS004', label: 'WS004' },
    { value: 'WS005', label: 'WS005' }
]);

// 设备状态选项
const statusOptions = ref([
    { value: 1, label: '生产中' },
    { value: 2, label: '维修中' },
    { value: 3, label: '停机' }
]);

const editFormRef = ref();

const handleEdit = (row?: EquipmentData) => {
    const targetRow = row || currentRow.value;
    if (!targetRow) {
        ElMessage.warning('请先选择一条记录');
        return;
    }
    
            // 获取设备状态值，确保是数字类型
        const equipmentStatus = targetRow.equipmentStatus !== undefined ? Number(targetRow.equipmentStatus) : 1;
    console.log('编辑设备状态:', equipmentStatus);
    
    // 打开编辑表单并填充数据
    editForm.value = {
        id: targetRow.id || 0,
        equipmentCode: targetRow.equipmentCode || '',
        equipmentName: targetRow.equipmentName || '',
        brand: targetRow.brand || '',
        specificationModel: targetRow.specificationModel || '',
        affiliatedWorkshop: targetRow.affiliatedWorkshop || '',
        equipmentStatus: equipmentStatus,
        deviceId: targetRow.deviceId || 0
    };
    
    editFormVisible.value = true;
};

// 提交编辑表单
const submitEditForm = async () => {
    if (!editFormRef.value) return;
    
    await editFormRef.value.validate(async (valid: boolean) => {
        if (valid) {
            try {
                // 确保提交的表单数据中设备状态是数字类型
                const formData = {
                    ...editForm.value,
                    equipmentStatus: Number(editForm.value.equipmentStatus)
                };
                
                // 发送请求
                const response = await axios.post('/api/EquipmentManagement/UpdateEquipmentLedger/UpdateEquipmentLedger', formData);
                
                // 检查响应
                if (response.data) {
                    ElMessage.success('修改成功');
                    editFormVisible.value = false;
                    fetchEquipmentData(); // 刷新列表
                } else {
                    ElMessage.error('修改失败');
                }
            } catch (error) {
                console.error('更新失败:', error);
                ElMessage.error('修改失败');
            }
        } else {
            ElMessage.warning('请正确填写表单');
            return false;
        }
    });
};

// 取消编辑
const cancelEdit = () => {
    editFormVisible.value = false;
};

const handleDelete = (row?: EquipmentData) => {
    const targetRow = row || currentRow.value;
    if (!targetRow) {
        ElMessage.warning('请先选择一条记录');
        return;
    }
    
    ElMessageBox.confirm(`确定要删除设备 ${targetRow.equipmentName} 吗？`, '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            // 调用删除API
            const response = await axios.delete('/api/EquipmentManagement/DeleteEquipmentLedger/DeleteEquipmentLedger', {
                params: { id: targetRow.id }
            });
            
            // 检查响应
            if (response.data) {
                ElMessage.success('删除成功');
                fetchEquipmentData(); // 刷新列表
            } else {
                ElMessage.error('删除失败');
            }
        } catch (error) {
            console.error('删除设备失败:', error);
            ElMessage.error('删除失败');
        }
    }).catch(() => {
        // 用户取消删除操作，不做任何处理
    });
};

const handlePrint = (row: EquipmentData) => {
    ElMessage.info(`打印设备标签：${row.equipmentName}`);
    // 这里可以实现打印逻辑
};

onMounted(() => {
    loadData();
    fetchEquipmentData();
});
</script>

<style scoped>
.equipment-ledger {
    display: flex;
    height: 100%;
    width: 100%;
}

.left-tree {
    width: 250px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e0e0e0;
    background-color: #fff;
    height: 100%;
}

.search-input {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.tree-title {
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f5f7fa;
}

.right-content {
    flex: 1;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.search-bar {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
}

.search-form {
    margin-bottom: 15px;
}

.operation-btns {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.loading, .error, .empty {
    padding: 20px;
    text-align: center;
}

.error {
    color: #f56c6c;
}

.empty {
    color: #909399;
}

/* 弹窗表单样式 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

:deep(.el-dialog) {
    padding-bottom: 10px;
    
    .el-dialog__header {
        text-align: center;
        border-bottom: 1px solid #ebeef5;
        padding: 15px 20px;
        margin-right: 0;
    }
    
    .el-dialog__body {
        padding: 25px 30px;
    }
    
    .el-dialog__title {
        font-size: 18px;
        font-weight: bold;
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
  
/* 新增设备弹窗样式 */
.add-equipment-dialog {
    .form-header {
        margin-bottom: 20px;
    }
    
    .form-item-code {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .code-input-group {
        display: flex;
        align-items: center;
        gap: 15px;
        
        .el-input {
            flex: 1;
        }
        
        .auto-generate {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            
            span {
                font-size: 14px;
                color: #606266;
            }
        }
    }
}



:deep(.el-table .cell) {
    white-space: nowrap;
}

:deep(.el-pagination) {
    justify-content: flex-end;
}

:deep(.el-tree) {
    background: transparent;
}

:deep(.el-tree-node__content) {
    height: 32px;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #ecf5ff;
    color: #409eff;
}

:deep(.el-tree-node__content:hover) {
    background-color: #f5f7fa;
}
</style>